<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css"/>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--vue-app是根容器-->
<div id="vue-app">
    <!--标签中即可用属性也可以用方法-->
    <!--<h1>{{ greet('night') }}</h1>
    <p> name: {{name}}</p>
    <p> job: {{job}}</p>
    <a v-bind:href="website">web开发</a>
    <input type="text" v-bind:value="name"/>
    <p v-html="websiteTag"></p>
    <div v-html="websiteTag"></div>-->

    <h1>Events</h1>
    <!--<button v-on:click="age++">长1岁</button>
    <button v-on:click="age&#45;&#45;">减1岁</button>-->
    <!--括号给不给都可以-->
    <!--只允许点击一次(点击一次有效)-->
    <button @click.once="add(1)">长1岁</button>
    <!--<button @click="add(1)">长1岁</button>-->
    <button @dblclick="add(10)">双击长10岁</button>
    <button v-on:click="minus(1)">减1岁</button>
    <button v-on:dblclick="minus(10)">双击减10岁</button>
    <p>My age is {{age}}</p>

    <div id="canvas" v-on:mousemove="updateXY">
        {{x}},{{y}}- <span v-on:mousemove.stop="">Stop Moving</span>
    </div>
    <!--阻止默认事件.prevent-->
    <a v-on:click.prevent="alert" href="http://www.thenewstep.com">The new step</a>

</div>

<script src="app.js"></script>
</body>
</html>